<!--  -->
<template>
  <div class="">
    <el-row>
      <el-col :span="24">
        <div class="back">
          <div class="left">
            <div>
              <i class="el-icon-s-fold" id="icon1"></i>
              <!-- <svg
                t="1617780177111"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2083"
                width="200"
                height="200"
              >
                <path
                  d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 
                        3.6-8 8v56c0 4.4 3.6 8 8 8z m-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v
                        -56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56z m504-486H120c-4.4 0-8 3.6-8 
                        8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0 632H120c
                        -4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8
                        -8zM115.4 518.9L271.7 642c5.8 4.6 14.4 0.5 14.4-6.9V388.9c0-7.4-8.5-11.5
                        -14.4-6.9L115.4 505.1c-4.5 3.5-4.5 10.3 0 13.8z"
                  p-id="2084"
                  fill="#f8f8f9"
                ></path>
              </svg> -->
            </div>
            <span>后台管理系统</span>
          </div>
          <div class="right">
            <div class="icoimg">
              <i class="el-icon-rank"></i>
              <i class="el-icon-bell"></i>
              <div class="portrait">
                <img src="../../assets/img/头像.jpg" alt="" />
              </div>

              <!-- class="el-dropdown-link el-dropdown-selfdefine" -->
              <span
                data-v-2ec03684=""
                class="admin"                
                aria-haspopup="list"
                aria-controls="dropdown-menu-8175"
                role="button"
                tabindex="0"
              >
                admin
                <i data-v-2ec03684="" class="el-icon-caret-bottom"></i>
              </span>

              <!-- <svg
                t="1617789836945"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2504"
                width="200"
                height="200"
              >
                <path
                  d="M885.28 659.52a48 48 0 0 1-31.2-39.84V450.72c0-160-153.92-266.08-220-299.36a131.2 131.2 0 0 0-37.76-72.96A118.88 118.88 0 0 0 513.44 48h-2.88a118.72 118.72 0 0 0-82.88 30.4 132.64 132.64 0 0 0-37.92 72.96c-65.92 33.28-219.84 139.36-219.84 299.36v168.32a48 48 0 0 1-31.2 40.48c-60.64 25.92-66.56 75.04-52.16 112 7.2 18.24 23.2 36 132.16 36h92.48C316.96 901.44 404.16 976 510.56 976S704 901.44 709.92 807.84h96c108.96 0 124.96-17.76 132.16-36 13.76-37.28 7.84-86.4-52.8-112.32zM512 913.92c-71.36 0-129.92-48-136-108.16h272c-6.08 60.48-64.64 108.16-136 108.16zM808.64 747.2H215.36A444.16 444.16 0 0 1 144 742.72c0-9.44 5.44-16 19.2-21.6a113.44 113.44 0 0 0 72-99.36V450.88c0-144 167.68-240 198.4-251.2l21.6-8v-21.76c0-6.4 2.88-61.28 55.36-61.28h2.4c52.64 0 55.68 54.88 55.84 60.96V192l21.6 8.16c30.72 11.68 198.4 107.84 198.4 251.2v170.4a113.12 113.12 0 0 0 72 99.36c13.76 5.92 19.68 12.16 19.2 21.6a444.16 444.16 0 0 1-71.36 4.48z"
                  p-id="2505"
                  fill="#f8f8f9"
                ></path>
              </svg> -->
              <!-- <svg
                t="1617789030907"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1419"
                width="200"
                height="200"
              >
                <path
                  d="M628.053333 628.053333a32 32 0 0 1 45.226667 0l158.72 158.634667V693.333333l0.298667-4.352A32 32 0 0 1 896 693.333333v181.333334l-0.341333 3.84a21.333333 21.333333 0 0 1-20.992 17.493333h-181.333334l-4.352-0.298667a32 32 0 0 1-27.648-31.701333l0.298667-4.352a32 32 0 0 1 31.701333-27.648h93.44l-158.72-158.72-3.114666-3.584a32 32 0 0 1 3.114666-41.642667z m-232.106666 0a32 32 0 0 1 3.114666 41.642667l-3.114666 3.584-158.72 158.72h93.44a32 32 0 0 1 31.701333 27.648l0.298667 4.352a32 32 0 0 1-27.648 31.701333L330.666667 896H149.333333a21.333333 21.333333 0 0 1-20.992-17.493333L128 874.666667v-181.333334a32 32 0 0 1 63.701333-4.352l0.298667 4.352v93.354667l158.72-158.634667a32 32 0 0 1 45.226667 0zM874.666667 128a21.333333 21.333333 0 0 1 20.992 17.493333L896 149.333333v181.333334a32 32 0 0 1-63.701333 4.352L832 330.666667V237.312L673.28 395.946667a32 32 0 0 1-48.341333-41.642667l3.114666-3.584 158.72-158.72h-93.44a32 32 0 0 1-31.701333-27.648L661.333333 160a32 32 0 0 1 27.648-31.701333L693.333333 128h181.333334zM330.666667 128l4.352 0.298667a32 32 0 0 1 27.648 31.701333l-0.298667 4.352a32 32 0 0 1-31.701333 27.648H237.226667l158.72 158.72 3.114666 3.584a32 32 0 0 1-48.341333 41.642667L192 237.312V330.666667l-0.298667 4.352A32 32 0 0 1 128 330.666667V149.333333l0.341333-3.84A21.333333 21.333333 0 0 1 149.333333 128h181.333334z"
                  p-id="1420"
                  fill="#f8f8f9"
                ></path>
              </svg> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
.back {
  background-color: #242f42;
  height: 70px;
  /* display: flex;
  align-items: center; */
  top: calc(50% - 40px);
}
span {
  font-size: 22px;
  color: rgb(255, 253, 253);
}

.left,
.right {
  display: flex;
  align-items: center; /*定义内部元素垂直居中*/
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.left {
  float: left;
}
.right {
  float: right;
}

i {
  height: 35px;
  width: 35px;
  margin-left: 10px;
  margin-right: 10px;
}
/* 展开 */
.el-icon-s-fold:before {
  content: "";
  font-size: 35px;
  color: white;
}

.icoimg {
  display: flex;
  align-items: center; /*定义内部元素垂直居中*/
}
/* 消息通知 */
.el-icon-bell:before {
  content: "";
  font-size: 30px;
  color: white;
}
/* 全屏 */
.el-icon-rank:before {
  content: "\E6D1";
  font-size: 35px;
  color: white;
  /* 以下三行语句是旋转icon */
  display: inline-block;
  transform: rotate(45deg);
  transition: 0s;
}

.portrait {
  /* 块级元素转行内元素 */
  display: inline-block;
  padding-right: 15px;
}
.portrait img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  overflow: hidden;/* 清除浮动是父元素对子元素清除子元素的浮动； */
}
</style>